import QtQuick 1.0
import "templates"
import "models"
import "js/main.js" as MainManager

Rectangle {
    id: mainContainer
    width: 360
    height: 640
    state: "shoppingListsState"

    property int listIdMain
    property string listNameMain

    property variant screenID;
    property string var_metric
    property string var_currency
/*
    property int item_id: 0
    property int item_list_id
    property string item_name
    property double item_quantity: 1
    property int item_measuring_unit: 1
    property double item_price: 0.00
    property bool item_checked
*/

    property alias shoppingItemListModel: shoppingItemsLoader.shoppingItemListModel;
    property alias shoppingListModel: shoppingListLoader.shoppingListModel;

    function getManager(){
        return MainManager;
    }

    FontLoader {id: nokiaStandard; source: "fonts/Nokia Standard Multi v2.1.ttf" }
    FontLoader { id: nokiaStandardLight; source: "fonts/Nokia Standard Multi Light v1.1.ttf" }

    Image {
        source: "images/backgrounds/app_bkg_360x640.png"
        fillMode: Image.Stretch
        smooth: true
    }

    Rectangle {
        id: contentArea1
        height: 488; width: 360
        x:0; y: 80
        color: "#00FFFFFF"

        ShoppingLists {
            id: shoppingListLoader
            anchors.fill: parent
        }
    }
    Rectangle {
        id: contentArea2
        height: 488; width: 360
        x:360; y: 80
        color: "#00FFFFFF"

        ProductsList {
            id: shoppingItemsLoader
            anchors.fill: parent
        }
    }

    TitleBar {
        id: titleBar
        title_text: "Shopping List"
        title_icon: "images/app_logo.png"

        onSettingsActive: {
            mainContainer.state = "settingsState"
        }
    }



    //footer area
    Footer {
        id: footerContainer
        y: 564

        //footer buttons for shopping list screen
        Row {
            id: footerButtonsContainer1
            spacing: 10

            x:10; y:14;

            FooterButton {
                id: buttonRight
                buttonWidth: 165
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                buttonText: "Add new list"

                onActivated: {
                    mainContainer.state = "listEditState"
                }
            }

            FooterButton {
                id: buttonLeft
                buttonWidth: 165
                anchors.bottom: parent.bottom
                anchors.right: parent.right
                buttonText: "Exit"

                onActivated: {
                    Qt.quit();
                }
            }
        }

        //footer buttons for shopping items list screen
        Row {
            id: footerButtonsContainer2
            spacing: 10

            x:10; y:100;

            FooterButton {
                id: buttonRight2
                buttonWidth: 165
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                buttonText: "New product"

                onActivated: {
                    mainContainer.state = "productEditState"
                }
            }

            FooterButton {
                id: buttonLeft2
                buttonWidth: 165
                anchors.bottom: parent.bottom
                anchors.right: parent.right
                buttonText: "Back"

                onActivated: {
                    mainContainer.state = "shoppingListsState"
                }
            }
        }

        states: [
            State {
                name: "active"
                PropertyChanges { target: buttonRight; buttonState: "normal" }
                PropertyChanges { target: shoppingListLoader; yFormAdd: 488 }
            },
            State {
                name: "disabled"
                PropertyChanges { target: buttonRight; buttonState: "disabled" }
                PropertyChanges { target: shoppingListLoader; yFormAdd: 366 }
            }
        ]

        transitions: [
            Transition {
                from: "*"; to: "*"
                PropertyAnimation { properties: "y"; easing.type: Easing.Linear }
            }
        ]
    }

    Rectangle {
        id: formContainer
        height: parent.height-titleBar.height;
        width: parent.width

        x: 0; y: 640
        color: "#FFFFFF"
        Loader {
            id: contentItem
            anchors.fill: parent
        }
    }

    states: [
        State {
            name: "shoppingListsState"
            PropertyChanges { target: shoppingItemsLoader; listID: 0; trigerActive: true }
            PropertyChanges { target: titleBar; title_text: "Shopping List"; settings_visible: true }
        },
        State {
            name: "shoppingItemsState"
            PropertyChanges { target: shoppingItemsLoader; listID: mainContainer.listIdMain; }
            PropertyChanges { target: shoppingItemsLoader; trigerActive: true }
            PropertyChanges { target: titleBar; title_text: mainContainer.listNameMain; settings_visible: false }
        },
        State {
            name: "settingsState"
            PropertyChanges { target: contentItem; source: "Settings.qml"}
            PropertyChanges { target: formContainer; y: 80 }
            PropertyChanges { target: titleBar; title_text: "Settings"; settings_visible: false }
        },
        State {
            name: "productEditState"
            PropertyChanges { target: contentItem; source: "ProductEditForm.qml" }
            PropertyChanges { target: formContainer; y: 80 }
            PropertyChanges { target: titleBar; title_text: "New product"; settings_visible: false }
        },
        State {
            name: "listEditState"
            PropertyChanges { target: contentItem; source: "ListEditForm.qml" }
            PropertyChanges { target: formContainer; y: 80 }
            PropertyChanges { target: titleBar; title_text: "Add new list"; settings_visible: false }
        }

    ]

    Timer {
        id: loaderCleaner
        triggeredOnStart: false;
        running: false; repeat: false; interval: 200

        onTriggered: {
            shoppingItemsLoader.source = "";
        }
    }

    Timer {
        id: firstRunDelay
        triggeredOnStart: false;
        running: false; repeat: false; interval: 5000

        onTriggered: {
            MainManager.loadSettingsData();
        }
    }

    transitions: [
        Transition {
            from: "shoppingListsState"; to: "shoppingItemsState"
            //NumberAnimation { properties: "x"; easing.type: Easing.InOutQuad; duration: 2000 }
            NumberAnimation { target: contentArea1; property: "x"; to: -360; easing.type: Easing.Linear; duration: 200 }
            NumberAnimation { target: contentArea2; property: "x"; to: 0; easing.type: Easing.Linear; duration: 200 }
            SequentialAnimation {
                NumberAnimation { target: footerButtonsContainer1; property: "y"; to: 100; easing.type: Easing.Linear; duration: 200 }
                NumberAnimation { target: footerButtonsContainer2; property: "y"; to: 14; easing.type: Easing.Linear; duration: 200 }
            }
        },
        Transition {
            from: "shoppingItemsState"; to: "shoppingListsState"
            //NumberAnimation { properties: "x"; easing.type: Easing.InOutQuad; duration: 2000 }
            NumberAnimation { target: contentArea2; property: "x"; to: 360; easing.type: Easing.Linear; duration: 200 }
            NumberAnimation { target: contentArea1; property: "x"; to: 0; easing.type: Easing.Linear; duration: 200 }
            SequentialAnimation {
                NumberAnimation { target: footerButtonsContainer2; property: "y"; to: 100; easing.type: Easing.Linear; duration: 200 }
                NumberAnimation { target: footerButtonsContainer1; property: "y"; to: 14; easing.type: Easing.Linear; duration: 200 }
            }
        },
        Transition {
            NumberAnimation { target: formContainer; property: "y";  easing.type: Easing.Linear; duration: 300 }
        }

    ]

    Component.onCompleted: {
        //firstRunDelay.running = true;
        MainManager.loadSettingsData();
    }
}
